<template>
<div class="leftnav" v-if="floorData">
    <p v-if="floorData" ref="turnname"></p>
    <span @click="floorChange(1)" id="ceshi"><img src="../../../assets/img/up.png"></span>
      <ul ref="floorul">
        <li ref="floorli" class="floorli" v-for="(item, index) in floorData" :key="index" @click="turnBySelf(item.value)">
          <span v-if="item.value>0">{{'F'+item.value}}</span>
          <span v-else>{{('B'+Math.abs(item.value))}}</span>
          </li>
      </ul>
    <span @click="floorChange(-1)"><img src="../../../assets/img/down.png"></span>
  </div>
</template>
<script>
import Velocity from "velocity-animate"
export default {
  name: "floorChange",
  data() {
    return {
      activeFloor: null,
      floorData: [
        { value: 50, name: "办公区" },
        { value: 49, name: "总裁办公室" },
        { value: 48, name: "会计部" },
        { value: 47, name: "结算部" },
        { value: 46, name: "休息区" },
        { value: 45, name: "会议室" },
        { value: 44, name: "休息平台" },
        { value: 43, name: "办公区2" },
        { value: 42, name: "前台" },
        { value: 41, name: "办公区三" },
        { value: 40, name: "财务处" },
        { value: 39, name: "行政办公室" },
        { value: 38, name: "人力资源部门" },
        { value: 37, name: "行政管理部" },
        { value: 36, name: "营销策划部" },
        { value: 35, name: "培训部" },
        { value: 34, name: "技术分析部" },
        { value: 33, name: "信息资源部" },
        { value: 32, name: "研究发生部" },
        { value: 31, name: "网站咨询部" },
        { value: 30, name: "呼叫中心" },
        { value: 29, name: "现货部" },
        { value: 28, name: "客服部" },
        { value: 27, name: "分布区域I" },
        { value: 26, name: "分布区域H" },
        { value: 25, name: "分布区域F" },
        { value: 24, name: "分布区域E" },
        { value: 23, name: "分布区域D" },
        { value: 22, name: "分布区域C" },
        { value: 21, name: "分布区域B" },
        { value: 20, name: "分布区域A" },
        { value: 19, name: "管理部" },
        { value: 18, name: "开发部" },
        { value: 17, name: "技术部" },
        { value: 16, name: "安全质量部" },
        { value: 15, name: "市场处理部" },
        { value: 14, name: "水处理部" },
        { value: 13, name: "智慧工程部" },
        { value: 12, name: "机电工程部" },
        { value: 11, name: "集成平台" },
        { value: 10, name: "质检部" },
        { value: 9, name: "项目部" },
        { value: 8, name: "智能输送部" },
        { value: 7, name: "机电工程中心" },
        { value: 6, name: "财务会计部" },
        { value: 5, name: "财务计划部" },
        { value: 4, name: "费用控制部" },
        { value: 3, name: "直营体系" },
        { value: 2, name: "市场开发中心" },
        { value: 1, name: "运营中心" },
        { value: -1, name: "深圳分公司" },
        { value: -2, name: "区域管理部" },
        { value: -3, name: "渠道开发部" },
        { value: -4, name: "资金管理部" }
      ],
      centerFloor: '', // 楼层导航中间选中楼层
      turnReady: true
    };
  },
  mounted() {
    this.activeFloor = this.$route.query.floor
    this.centerFloor = this.$route.query.floor // 赋值： 选中楼层
    
    let floorValue = this.getFloorValue() // 获取当前数组
    let thisFloorIndex = this.getFloorValue().indexOf(this.centerFloor) // 初始化当前楼层位置
    // 楼层位于特殊位置时，重组数组
    if (thisFloorIndex < 2) { // 当前楼层位于floorData第1，2个，末尾数据移动数组开头
      for (let i = 0; i < (2 -thisFloorIndex); i++) {
        let tempData = this.floorData.pop()
        this.floorData.unshift(tempData)
      }
    } else if (floorValue.length - thisFloorIndex < 3) { // 当前楼层位于floorData到数第1，2个，开头数据移动数组末尾
      for (let i = 0; i < 3 - (floorValue.length - thisFloorIndex); i++) {
        let tempData = this.floorData.shift()
        this.floorData.push(tempData)
        // console.table(this.floorData)
      }
    }
    // 重组数组后楼层位置
    let currentFloorIndex = this.getFloorValue().indexOf(this.centerFloor) - 2
    this.$refs.floorli[0].style.marginTop = '-' + currentFloorIndex * 55 + 'px'
  },
  methods: {
    floorChange (value) {
      let _this = this
      if (this.turnReady) {
        this.turnReady = false
        // 改变楼层，value为改变的值，正数为上行多少，负数为下行多少
        for (let i = 0; i < Math.abs(value); i++) {
          if (value > 0) {
            let tempData = this.floorData.pop()
            this.floorData.unshift(tempData)
          } else if (value < 0) {
            let tempData = this.floorData.shift()
            this.floorData.push(tempData)
          }
        }
        let floorValueArry = this.getFloorValue()
        this.centerFloor = floorValueArry[floorValueArry.indexOf(this.centerFloor) - value]
        this.$refs.floorli[0].style.marginTop = `${parseInt(this.$refs.floorli[0].style.marginTop) - 55 * value}px`
        Velocity(
          this.$refs.floorli[0],
          {
            marginTop: parseInt(this.$refs.floorli[0].style.marginTop) + 55 * value
          },
          {
            duration: 300,
            complete: function () {
              _this.turnReady = true
            }
          }
        );
        Velocity(
          this.$refs.turnname,
          {
            opacity: 0
          },
          {
            duration: 150
          }
        );
        Velocity(
          this.$refs.turnname,
          {
            opacity: 1
          },
          {
            delay: 1,
            duration: 150
          }
        );
        var obj = {
          type: this.$route.query.type,
          subtype: this.$route.query.subtype,
          floor: this.centerFloor
        }
        Vue.$router.push({path: this.$route.path, query: obj})
        eyeFlyToX(this.centerFloor)
      }
    },
    turnBySelf (value) { // 点击楼层事件
      let floorValue = this.getFloorValue()
      let thisFloorIndex = floorValue.indexOf(value)
      let centerFloorIndex = floorValue.indexOf(this.centerFloor)
      // console.log(centerFloorIndex, thisFloorIndex)
      this.floorChange(centerFloorIndex - thisFloorIndex)
    },
    getFloorValue () {
      // 获取楼层value值，获取选中楼层在当前floorData中的位置
      let floorValue = []
      this.floorData.forEach((item, index) => {
        floorValue.push(item.value)
      })
      return floorValue
    }
  }
};
</script>

<style lang="scss" scoped>
.leftnav {
  width: 36px;
  height: 400px;
  font-size: 0.15rem;
  position: absolute;
  left:-50px;
  top: 25%;
  overflow: hidden;
  -moz-user-select: none; 
  -webkit-user-select: none; 
  -ms-user-select: none; 
  -khtml-user-select: none; 
  user-select: none; 
  ul {
    padding: 0;
    margin: 0;
    height: 250px;
    overflow: hidden;
    z-index: 2;
    li {
      list-style-type: none;
      background: url("../../../assets/img/little.png") no-repeat;
      color: #fff;
      height: 40px;
      padding-top: 4px;
      margin-bottom: 15px;
      cursor: pointer;
    }
    li:last-child {
      margin: 0;
    }
  }
  span {
    display: inline-block;
    width: 36px;
    cursor: pointer;
    // padding-left: 1px;
    z-index: 2;
    text-align: center;
  }
  p {
    background: url("../../../assets/img/floor.png") no-repeat;
    display: inline-block;
    height: 200px;
    line-height: 190px;
    padding-left: 50px;
    width: 50px;
    margin-left: -9px;
    z-index: 1;
    margin-bottom: -254px;
  }
}
</style>
